<template>
  <ContentWrap>
    <template v-if="modelData.type === BpmModelTypeEnum.Bpmn">
      <BpmnModelDesigner
        v-if="showDesigner"
        :model-id="modelData.id"
        :model-key="modelData.key"
        :model-name="modelData.name"
        @success="handleDesignSuccess"
      />
    </template>
  </ContentWrap>
</template>

<script setup lang="ts">
import BpmnModelDesigner from './designer/BpmnModelDesigner.vue'
import { BpmModelTypeEnum } from '@/utils/constants'

defineOptions({ name: 'BpmModelProcessDesign' })

const modelData = defineModel<any>()

/** 是否显示设计器 */
const showDesigner = computed(() => {
  return Boolean(modelData.value?.key && modelData.value?.name)
})

const handleDesignSuccess = async (data?: any) => {
  if (data) {
    const newModelData = {
      ...modelData.value,
      bpmnXml: modelData.value.type === BpmModelTypeEnum.Bpmn ? data : null
    }
    await nextTick()
    modelData.value = newModelData
  }
}

const processData = inject('processData') as Ref

/** 表单校验 */
const validate = async () => {
  if (!processData.value) {
    throw new Error('请设计流程模型')
  }
}

defineExpose({
  validate
})
</script>

<style scoped lang="scss"></style>
